<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单输入绑定</title>
</head>
<body>
<div id="app">
  <input type="text" placeholder="请输入..." v-model="message">
  {{message}}<br>

  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{checked}}</label><br>

  <input type="checkbox" id="a" value="张三" v-model="checkedNames">
  <label for="a">张三</label>
  <input type="checkbox" id="b" value="李四" v-model="checkedNames">
  <label for="b">李四</label>
  <input type="checkbox" id="c" value="王五" v-model="checkedNames">
  <label for="c">王五</label>
  <div>{{checkedNames}}</div>

  <input type="radio" id="one" value="男" v-model="gender">
  <label for="one">男</label>
  <input type="radio" id="two" value="女" v-model="gender">
  <label for="two">女</label>
  <div>{{gender}}</div>

  <select v-model="selected">
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
  </select>
</div>

<script src="../vue.global.js"></script>
<script>
  const App = {
    data(){
      return {
        message: 'Vue3',
        checked: true,
        checkedNames: [],
        gender: '男',
        selected: '',
      }
    }
  }

  const vm = Vue.createApp(App).mount('#app');
  console.log(vm)
</script>
</body>
</html>
